<!doctype html><html class="" data-reactroot=""><head>
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-react-helmet="true" property="og:title" content="React-router5 中文文档"/><meta data-react-helmet="true" property="og:description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
<title data-react-helmet="true">React-router5 中文文档</title>
<link data-react-helmet="true" rel="stylesheet" href="/react_router_chinese/assets/index.css"/><link data-react-helmet="true" id="prismTheme" rel="stylesheet" href="/react_router_chinese/assets/prism.css"/>
<script data-react-helmet="true" >
    const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (shouldSetIsDark) {
      document.documentElement.classList.add('is_dark');
      document.getElementById('prismTheme').href = "/react_router_chinese/assets/prism_tomorrow.css";
    }
  </script>
</head><body><header><h1 class="hide_on_mobile"><a href="/react_router_chinese/">React-router5 中文文档</a></h1><nav><ul><li class="show_on_mobile flex_center"><a class="czs-menu-l" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-menu-l.svg&quot;)"></a></li><li class="show_on_mobile"><h1 class="mobile_title"><a href="/react_router_chinese/">React-router5 中文文档</a></h1></li><li style="flex-grow:1"></li><li class="flex_center"><a class="czs-github-logo" href="https://github.com/frisktale/react_router_chinese" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-github-logo.svg&quot;)"></a></li><li class="toggle_dark flex_center"><span class="czs-sun" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun.svg&quot;)"></span><span class="czs-sun-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun-l.svg&quot;)"></span><span class="czs-moon" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon.svg&quot;)"></span><span class="czs-moon-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon-l.svg&quot;)"></span></li></ul></nav></header><aside class="sidebar"><ol class="list_style_none"><li class="unfold"><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">文档<span class="czs-angle-up-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></span><span class="czs-angle-down-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-down-l.svg&quot;)"></span></a><ol class="list_style_none" style="height:auto"><li class=""><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">快速开始</a></li><li class=""><a href="/react_router_chinese/guides/BasicComponents.html" class="nav_link">基础组件</a></li><li class=""><a href="/react_router_chinese/guides/ServerRendering.html" class="nav_link">服务端渲染</a></li><li class=""><a href="/react_router_chinese/guides/CodeSplitting.html" class="nav_link active">代码拆分</a></li><li class=""><a href="/react_router_chinese/guides/ScrollRestoration.html" class="nav_link">滚动恢复</a></li><li class=""><a href="/react_router_chinese/guides/Philosophy.html" class="nav_link">设计思想</a></li><li class=""><a href="/react_router_chinese/guides/Testting.html" class="nav_link">测试</a></li><li class=""><a href="/react_router_chinese/guides/ReduxIntegration.html" class="nav_link">集成 Redux</a></li><li class=""><a href="/react_router_chinese/guides/StaticRouter.html" class="nav_link">静态路由</a></li></ol></li><li class=""><a href="/react_router_chinese/API/API.html" class="nav_link">API</a></li></ol></aside><section class="main"><div class="main_article"><article><h2 id="%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86">代码拆分<a class="anchor" href="#%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86">§</a></h2>
<p>Web应用一个非常出色的特性就是我们不必下载整个应用就可以使用。你可以认为代码拆分是逐渐递增的加载我们的应用。在这里，我们使用webpack, @babel/plugin-syntax-dynamic-import,和loadable-components来实现。</p>
<p>webpack内置了对动态导入的支持; 但是，如果你使用Babel（例如，将JSX编译为JavaScript），那么你将需要同时使用@ babel / plugin-syntax-dynamic-import插件。 这是一个仅只进行语法解析的插件，这意味着Babel不会进行任何其他转换。 该插件只允许Babel解析动态导入，因此webpack可以将它们打包成不同的代码模块。 你的.babelrc应该是这样的：</p>
<pre class="language-autoit"><code class="language-autoit">{
  <span class="token string">"presets"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/preset-react"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">"plugins"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/plugin-syntax-dynamic-import"</span><span class="token punctuation">]</span>
}
</code></pre>
<p>loadable-components是一个用于加载具有动态导入功能的组件的库。 她会自动处理各种边缘情况，使代码拆分变得简单，以下是如何使用loadable-components的示例：</p>
<pre class="language-autoit"><code class="language-autoit">import loadable from <span class="token string">'@loadable/component'</span>
import Loading from <span class="token string">"./Loading"</span><span class="token comment">;</span>

<span class="token keyword">const</span> LoadableComponent <span class="token operator">=</span> <span class="token function">loadable</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">import</span><span class="token punctuation">(</span><span class="token string">'./Dashboard'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> {
  fallback<span class="token punctuation">:</span> Loading<span class="token punctuation">,</span>
}<span class="token punctuation">)</span>

export <span class="token keyword">default</span> class LoadableDashboard extends React<span class="token punctuation">.</span>Component {
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    return <span class="token operator">&lt;</span>LoadableComponent <span class="token operator">/</span><span class="token operator">></span><span class="token comment">;</span>
  }
}
</code></pre>
<p>只需使用LoadableDashboard（或任何你自定义的组件），当你在应用程序中使用它时，它将自动加载和渲染。在实际组件加载时，fallback是一种占位的组件。<a href="https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/">此处</a>提供了完整的文档</p>
<h3 id="%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86%E5%92%8Cserver-side%E6%B8%B2%E6%9F%93">代码拆分和Server-Side渲染<a class="anchor" href="#%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86%E5%92%8Cserver-side%E6%B8%B2%E6%9F%93">§</a></h3>
<p>loadable-components包含了server-side渲染的引导。</p></article></div><aside class="main_toc_container nav_link_container"><div class="main_toc"><nav class="toc"><ol><li><a href="#%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86">代码拆分</a><ol><li><a href="#%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86%E5%92%8Cserver-side%E6%B8%B2%E6%9F%93">代码拆分和Server-Side渲染</a></li></ol></li></ol></nav></div></aside></section><footer>Powered by&amp;nbsp;<a href="https://github.com/xcatliu/pagic" target="_blank">Pagic</a></footer><div class="tools flex_center hide_on_mobile"><a class="czs-pen button" href="https://github.com/frisktale/react_router_chinese/edit/master/./guides/CodeSplitting.md" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-pen.svg&quot;)"></a><a class="czs-angle-up-l button" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></a></div><script src="https://cdn.pagic.org/react@17.0.2/umd/react.production.min.js"></script><script src="https://cdn.pagic.org/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script type="module" src="/react_router_chinese/index.js"></script></body></html>